<template>
    <div>
        <basic-layout title="指南详情" :showAddBtn="false">
            <div class="columnFlex">
                <!-- 列表 -->
                <van-row class="listCon">
                    <div class="content">
                        <h5 class="title">{{problemDetail.guideTitle}}</h5>
                        <div>
                            <h5>指南描述：</h5>
                            <p v-html="showHTML(problemDetail.guideDesc)"></p>
                        </div>
                        <div>
                            <h5>指南解答：</h5>
                            <p v-html="showHTML(problemDetail.guideAnswer)"></p>
                        </div>
                    </div>
                </van-row>
            </div>
        </basic-layout>
        <fullLoading v-if="loading"></fullLoading>
    </div>
</template>

<script>
    import { queryAssistGuideDetails } from '@/api/platframe/problem';
    export default {
        data () {
            return {
                loading: false,
                problemDetail: {},
            };
        },
        created () {
            this.guideId = this.$route.query.guideId;
            this.getProblemDetail();
        },
        methods: {
            // 获取问题详情
            getProblemDetail () {
                this.loading = true;
                queryAssistGuideDetails(this.guideId).then((res) => {
                    this.loading = false;
                    if (res.code === 1000 && res.data) {
                        this.problemDetail = res.data;
                    }
                }).catch(() => {
                    this.loading = false;
                });
            },
            // 文字内容换行转换
            showHTML (text) {
                return text ? text.toString().replace(new RegExp('\r\n|\n', 'g'), '<br />') : '';
            },
        }
    };
</script>

<style scoped lang="less">
    .listCon {
        padding-top: 6px;
        .content {
            height: 100%;
            overflow: auto;
            .title {
                line-height: 20px;
                padding: 15px 10px;
                font-size: 13px;
                box-sizing: border-box;
                background: #fff;
                box-shadow: 0px 3px 9px rgba(27, 93, 213, 0.1);
                border-radius: 5px;
            }
            div {
                padding: 0 10px 15px;
                background: #fff;
                box-sizing: border-box;
                font-size: 12px;
                box-shadow: 0px 3px 9px rgba(27, 93, 213, 0.1);
                border-radius: 5px;
                margin: 10px 0;
                min-height: 100px;
                h5 {
                    line-height: 40px;
                    margin: 0;
                    font-size: 12px;
                }
                p {
                    text-indent: 2em;
                    line-height: 20px;
                }
            }
        }
    }
</style>